.baseUI-button {
  background: none;
  cursor: pointer;
  border: 1px solid var(--base-color-border);
  outline: none;
  color: inherit;
  padding: 4px 8px;
  border-radius: 4px;
  height: 32px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;

  &--primary {
    border-color: var(--base-color-primary);
    color: white;
    background-color: var(--base-color-primary);


    &:hover {
      border-color: var(--base-color-primary-hover);
      background-color: var(--base-color-primary-hover);
    }

    &:active {
      border-color: var(--base-color-primary-active);
      background-color: var(--base-color-primary-active);
    }
  }



  &--dashed {
    border-style: dashed;
    border-color: var(--base-color-border);
    color: var(--base-color-text);


    &:hover {
      border-color: var(--base-color-primary-hover);
      color: var(--base-color-primary-hover);
    }

    &:active {
      border-color: var(--base-color-primary-active);
      color: var(--base-color-primary-active);
    }
  }



  &:disabled {
    cursor: not-allowed;
    border-color: #d9d9d9;
    color: #bfbfbf;
    background-color: #f0f0f0;
  }
}